<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色管理</title>
		<link href="../../../component/pear/css/pear.css" rel="stylesheet" />
	</head>
	<body class="pear-container">
		<!-- 搜索 -->
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">角色名称</label>
							<div class="layui-input-inline">
								<input type="text" name="roleName" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">角色Key</label>
							<div class="layui-input-inline">
								<input type="text" name="roleKey" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<!-- 修改表单 -->
		<div id="editLayer" style="display:none">
			<form class="layui-form" lay-filter="editForm">
				<input type="hidden" name="id" value="" />
				<div class="mainBox">
					<div class="main-container">
						<div class="layui-form-item">
							<label class="layui-form-label">角色名称</label>
							<div class="layui-input-block">
								<input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入角色名称"
									class="layui-input" required="true">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">角色key</label>
							<div class="layui-input-block">
								<input type="text" name="roleKey" lay-verify="title" autocomplete="off" placeholder="请输入标题"
									class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">角色描述</label>
							<div class="layui-input-block">
								<input type="text" name="roleDesc" lay-verify="title" autocomplete="off" placeholder="请输入标题"
									class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">是否可用</label>
							<div class="layui-input-block">
								<input type="checkbox" name="status" value="0" lay-skin="switch" lay-text="启用|禁用" />
							</div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="button-container">
						<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
							lay-filter="role-modify">
							<i class="layui-icon layui-icon-ok"></i>
							提交
						</button>
						<button type="reset" class="pear-btn pear-btn-sm">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>

		<!-- 角色表格 -->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="role-table" lay-filter="role-table"></table>
			</div>
		</div>
		
		<!-- 头部工具栏 -->
		<script type="text/html" id="role-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</button>
			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
				<i class="layui-icon layui-icon-delete"></i>
				删除
			</button>
		</script>
		
		<!-- 行工具栏 -->
		<script type="text/html" id="role-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
			<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="power"><i class="layui-icon layui-icon-vercode"></i></button>
			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>
		
		<!-- 栏用可编辑元素  是否可用 -->
		<script type="text/html" id="role-enable">
			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="role-enable"  {{ d.status== '0' ? 'checked' : '' }} />
		</script>

		<!-- 通用的js引入 -->
		<script src="../../../component/layui/layui.js"></script>
		<script src="../../../component/pear/pear.js"></script>

		<!-- 页面功能实现js -->
		<script>
			// use 引用或者使用 前端框架有很多个组件 
		    layui.use(['table','form','jquery'],function () {
		        let table = layui.table;
		        let form = layui.form;
		        let $ = layui.jquery;
		
		        let MODULE_PATH = "operate/";
		
				// 表格的列信息
		        let cols = [
		            [
		                {type:'checkbox',fixed:true},
		                {title: '角色名', field: 'name', align:'center',fixed:true},
		                {title: 'Key值', field: 'roleKey', align:'center',sort:true},
		                {title: '描述', field: 'roleDesc', align:'center'},
						//可以编辑的行叫templet
		                {title: '是否可用', field: 'status', align:'center', templet:'#role-enable'},
						//行工具栏
		                {title: '操作', toolbar: '#role-bar', align:'center', width:195}
		            ]
		        ]
		
				// 渲染 生成表格
		        table.render({
					id:'demotable',
		            elem: '#role-table',
					//后台地址
		            url: '/api/system/role/page',
					request: {
						pageName: 'pageNo', // 页码的参数名称，默认：page
						limitName: 'limit' // 每页数据条数的参数名，默认：limit
					},
					//在请求头里面添加token
					headers:{"token":sessionStorage.token},
					//是否开启分页
		            page: true ,
					// 重新规定成功的状态码为 200，table 组件默认为 0
					response: {
						statusCode: 200 
					},
					// 将原始数据解析成 table 组件所规定的数据格式
					parseData: function(res){
						return {
							"code": res.code, //解析接口状态
							"msg": res.msg, //解析提示文本
							"count": res.data.total, //解析数据长度
							"data": res.data.records //解析数据列表
						};
					},
					//表格的列信息
		            cols: cols ,
					//主题  线
		            skin: 'line',
					//头部工具栏
		            toolbar: '#role-toolbar',
					//内置的右侧工具栏
		            defaultToolbar: [{
						title: '刷新',
		                layEvent: 'refresh',
		                icon: 'layui-icon-refresh',
		            }, 'filter', 'print', 'exports']
		        });
		
				//行工具栏处理
		        table.on('tool(role-table)', function(obj){
		            if(obj.event === 'remove'){
		                window.remove(obj);
		            } else if(obj.event === 'edit'){
		                window.edit(obj);
		            } else if(obj.event === 'power'){
		                window.power(obj);
		            }
		        });
		
				//头部工具栏的事件处理
		        table.on('toolbar(role-table)', function(obj){
		            if(obj.event === 'add'){
		                window.add();
		            } else if(obj.event === 'refresh'){
		                window.refresh();
		            } else if(obj.event === 'batchRemove'){
		                window.batchRemove(obj);
		            }
		        });
	
				//模糊查询
		        form.on('submit(role-query)', function(data){
		            table.reload('demotable',{where:data.field})
		            return false;
		        });
		
				//是否可用处理
		        form.on('switch(role-enable)', function(obj){
					var loadIndex = layer.msg('加载中', {
						icon: 16,
						shade: 0.01
					});
					$.ajax({
						method:"patch",
						headers:{"token":sessionStorage.token},
						url:"/api/system/role/modifyStatus/"+this.value,
						success:function (d){
							layer.close(loadIndex);
							if(d.code == 200){
								layer.tips("角色状态已更改!!!",{icon:1,time:3000});
							}else{
								layer.msg('对不操作未生效',{icon:2,time:3000});
								table.reload('role-table');
							}
						},error:function (err){
							layer.msg('后台无应答',{icon:2,time:3000});
							table.reload('role-table');
						}
					});
		        });

				// 添加按钮的处理功能
		        window.add = function(){
		            layer.open({
		                type: 2,
		                title: '新增',
		                shade: 0.1,
		                area: ['500px', '400px'],
		                content: './add.html'
		            });
		        }
		
		        window.power = function(obj){
		            layer.open({
		                type: 2,
		                title: '授权',
		                shade: 0.1,
		                area: ['320px', '400px'],
						maxmin: true,
		                content: './rolePrivilege.html'
		            });
		        }
		
		        window.edit = function(obj){
		            let editoring = layer.open({
		                type: 1,
		                title: '修改',
		                shade: 0.1,
		                area: ['500px', '400px'],
		                content: $("#editLayer")
		            });
					form.val("editForm",{
						id:obj.data.id,
						name:obj.data.name,
						roleKey:obj.data.roleKey,
						roleDesc:obj.data.roleDesc,
						status:obj.data.status == 1 ? false : true
					});

					form.on('submit(role-modify)',function (data){
						$.ajax({
							url: "/api/system/role/roleModify",
		                    type:'put',
							contentType:"application/json",
							data:JSON.stringify(data.field),
							headers:{"token":sessionStorage.token},
		                    success:function(result){
		                        layer.close(editoring);
		                        if(result.code == 200){
		                            layer.msg(result.msg,{icon:1,time:1000},function(){
										table.reload('demotable');
		                            });
		                        }else{
		                            layer.msg(result.msg,{icon:2,time:1000});
		                        }
		                    }
						});

						return false;
					})
		        }
		
		        window.remove = function(obj){
		            layer.confirm('确定要删除该角色', {icon: 3, title:'提示'}, function(index){
		                layer.close(index);
		                let loading = layer.load();
		                $.ajax({
		                    url: "/api/system/role/deleteById/"+obj.data.id,
		                    type:'delete',
							headers:{"token":sessionStorage.token},
		                    success:function(result){
		                        layer.close(loading);
		                        if(result.code == 200){
		                            layer.msg(result.msg,{icon:1,time:1000},function(){
										table.reload('demotable');
		                            });
		                        }else{
		                            layer.msg(result.msg,{icon:2,time:1000});
		                        }
		                    }
		                })
		            });
		        }
		
		        window.batchRemove = function(obj){
					// 
		            let data = table.checkStatus(obj.config.id).data;
		            if(data.length === 0){
		                layer.msg("未选中数据",{icon:3,time:1000});
		                return false;
		            }
				
		            layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){
		                layer.close(index);
		                let loading = layer.load();
		                $.ajax({
		                    url: "/api/system/role/deleteByIds/"+data.map(x=>x.id).join(","),
		                    type:'delete',
							headers:{"token":sessionStorage.token},
		                    success:function(result){
		                        layer.close(loading);
		                        if(result.code == 200){
		                            layer.msg(result.msg,{icon:1,time:1000},function(){
										table.reload('demotable');
		                            });
		                        }else{
		                            layer.msg(result.msg,{icon:2,time:1000});
		                        }
		                    }
		                })
		            });
		        }
		
		        window.refresh = function(){
		            table.reload('demotable');
		        }
		    })
		</script>
	</body>
</html>
